<template>
  <div class="download-file">
    <FileIcon class="file-icon-svg" :name="fileType(data.url)" />
    <span class="file-name">
      {{ data.name }}
    </span>
    <IconDownload2 class="file-download-svg" @click="downloadFileBtn()" />
  </div>
</template>

<script setup lang="ts">
type Data = {
  name: string;
  type: string;
  url: string;
};
type Props = {
  data: Data;
};


const fileType = computed(() => {
  return (url) => {
    let file = url.split("/").pop();
    let ext = file.split(".").pop();
    return ext;
  };
});

const props = defineProps<Props>();

const downloadFileBtn = async () => {
  let href = URL.createObjectURL(new Blob([props.data.url]));
  let a = document.createElement("a");
  a.href = props.data.url;
  // a.href = href
  a.target = "_blank";
  a.download = props.data.name;
  a.click();
  window.URL.revokeObjectURL(href);
};
</script>
<style scoped lang="less">
.download-file {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #36434d;
  cursor: pointer;
  .file-name {
    margin-left: 12px;
    margin-right: 8px;
  }
  .file-icon-svg {
    width: 24px;
    height: 24px;
  }
  .file-download-svg {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 768px) {
  .download-file {
    font-size: 72px;
    .file-name {
      margin-left: 61px;
      margin-right: 41px;
    }
    .file-icon-svg {
      width: 123px;
      height: 123px;
    }
    .file-download-svg {
      width: 102px;
      height: 102px;
    }
  }
}
</style>
